<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>svg轨迹</title>
    <style>
        #drawPath {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: none;
        }

        /* 关键：悬浮SVG时，轨迹path才加动画 */
        #a:hover #drawPath {
            animation: drawPath 2s ease-in-out forwards;
        }

        @keyframes drawPath {
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        .campus-box {
            background-color: aqua;
        }

        .campus-box :hover .icon path {
            animation: icon-path-animation 3s ease-in infinite;
        }

        .icon path {
            stroke-width: 40;
            stroke: #FFF;
        }

        .icon {
            fill: transparent;
            color: #FFF;
            cursor: pointer;
            stroke-width: 40;
            width: 90px;
        }

        @keyframes icon-path-animation {
            0% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 4917;
                fill: transparent;
            }
            40% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: transparent
            }
            60% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: transparent
            }
            100% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: transparent
            }
        }

        .campus-box {
            width: 100%;
            height: 280px;
            position: relative;
            overflow: hidden;
        }

        .campus-bg1 {
            background: #80c269;
        }

        .icon path {
            stroke-width: 40;
            stroke: #FFF;
        }

        .icon {
            fill: transparent;
            color: #FFF;
            cursor: pointer;
            stroke-width: 40;
            width: 90px;
        }
    </style>
</head>
<body>
<div class="campus-bg1">
    <a target="_blank">
        <svg t="1751521472916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4494" width="256" height="256">
            <path d="M828.4 387.8l-186-186.2 51.1-51.1c21.9-21.9 57.7-21.9 79.6 0L879.6 257c21.9 21.9 21.9 57.7 0 79.7l-51.2 51.1zM595.1 248.8L781 434.9 436.7 779.7 250.8 593.5l344.3-344.7zM204 826l22.7-208.9 185.6 185.8L204 826z"
                  fill="rgba(0,0,0,0)" p-id="4495"></path>
        </svg>
    </a>
</div>


<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90"
             height="90" viewBox="0 0 90 90" fill="none">
            <path class="icon-path"
                  d="M90 45C90 20.1472 69.8528 0 45 0C20.1472 0 0 20.1472 0 45C0 69.8528 20.1472 90 45 90C69.8528 90 90 69.8528 90 45ZM55.2125 37.1625L68.75 37.1625L83 22.9125L70.175 19.5875L67.0875 7L52.8375 21.25L52.8375 35.025L40.25 47.6125L42.3875 49.75L55.2125 37.1625ZM65.425 13.4125L67.0875 22.9125L76.5875 24.3375L65.425 33.8375L55.925 33.8375L55.925 21.25L65.425 13.4125ZM41.4375 79.9125C24.1 79.9125 10.0875 65.9 10.0875 48.5625C10.0875 31.225 24.1 17.2125 41.4375 17.2125C43.575 17.2125 45.475 17.45 47.6125 17.925L47.6125 14.8375C45.7125 14.3625 43.575 14.125 41.4375 14.125C22.4375 14.125 7 29.5625 7 48.5625C7 67.5625 22.4375 83 41.4375 83C60.4375 83 75.875 67.5625 75.875 48.5625C75.875 46.425 75.6375 44.525 75.1625 42.3875L72.075 42.3875C72.55 44.2875 72.7875 46.425 72.7875 48.5625C72.7875 65.9 58.775 79.9125 41.4375 79.9125ZM41.4375 64.2375C32.65 64.2375 25.7625 57.1125 25.7625 48.5625C25.7625 40.0125 32.8875 32.8875 41.4375 32.8875C43.575 32.8875 45.7125 33.3625 47.6125 34.3125L47.6125 30.9875C45.7125 30.275 43.575 29.8 41.4375 29.8C30.9875 29.8 22.675 38.1125 22.675 48.5625C22.675 59.0125 30.9875 67.325 41.4375 67.325C51.8875 67.325 60.2 59.0125 60.2 48.5625C60.2 46.425 59.725 44.2875 59.0125 42.3875L55.6875 42.3875C56.6375 44.2875 57.1125 46.425 57.1125 48.5625C57.1125 57.35 49.9875 64.2375 41.4375 64.2375ZM47.85 49.9875C47.1375 52.6 44.7625 54.5 41.9125 54.5C38.35 54.5 35.5 51.65 35.5 48.0875C35.5 45.2375 37.4 42.8625 40.0125 42.15L43.3375 38.825C42.8625 38.5875 42.3875 38.5875 41.9125 38.5875C36.6875 38.5875 32.4125 42.8625 32.4125 48.0875C32.4125 53.3125 36.6875 57.5875 41.9125 57.5875C47.1375 57.5875 51.4125 53.3125 51.4125 48.0875C51.4125 47.6125 51.175 47.1375 51.175 46.6625L47.85 49.9875Z"
                  fill-rule="evenodd" fill="#000">
            </path>
        </svg>
    </a>
</div>

<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">
        <svg class="icon" p-id="6341" t="1666340560618" version="1.1" viewbox="0 0 1024 1024" width="60"
             xmlns="http://www.w3.org/2000/svg">
            <path class="icon-path"
                  d="M640 469.333333a85.333333 85.333333 0 1 1-170.709333-0.042666A85.333333 85.333333 0 0 1 640 469.333333z m123.733333 469.333334c-217.6 0-332.8-170.666667-516.266666-170.666667C72.533333 768 0 938.666667 0 938.666667s51.2-85.333333 243.2-85.333334c179.2 0 273.066667 170.666667 512 170.666667 179.2 0 268.8-170.666667 268.8-170.666667s-106.666667 85.333333-260.266667 85.333334z m-68.266666-68.266667C537.6 819.2 405.333333 682.666667 213.333333 682.666667c0 0 17.066667-93.866667 119.466667-174.933334C341.333333 503.466667 384 332.8 384 332.8l0.896 0.085333a42.581333 42.581333 0 0 1 22.698667-29.738666l138.453333-69.248A147.541333 147.541333 0 0 1 503.466667 196.266667c-34.133333-46.933333-72.533333-128-72.533334-128L571.733333 0s42.666667 64 55.466667 123.733333c9.770667 35.712 14.421333 78.677333 1.109333 102.912l1.066667 2.56c2.090667 2.517333 4.48 4.693333 6.101333 7.722667 2.346667 4.693333 3.413333 9.642667 3.925334 14.549333l136.32 304a42.026667 42.026667 0 0 1 27.690666 18.176 42.496 42.496 0 0 1 0.896 45.44l27.306667 60.885334c9.258667 3.157333 19.712 7.978667 30.250667 15.445333 25.6 21.333333 76.8 89.642667 89.6 140.8-21.333333 34.176-93.866667 59.733333-128 59.733333-62.336-118.698667-48.256-179.541333-33.92-205.568l-19.370667-43.264-106.496 70.997334a42.538667 42.538667 0 0 1-42.752 2.730666l-122.794667-61.354666c-8.746667 14.677333-20.266667 37.12-20.266666 53.034666 123.733333 64 145.066667 110.933333 217.6 157.866667z m39.296-302.250667L612.693333 296.021333l-148.266666 74.112-6.442667 32.298667L443.733333 524.8l195.584 107.050667 95.445334-63.701334z"
                  p-id="6342"></path>
        </svg>
        <span>体育与健康</span></a>
</div>

<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">
        <svg t="1751522119104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="7380" width="56" height="56" fill="none">
            <path class="icon-path"
                  d="M893.614907 120.84472c-19.080745 0-31.801242 12.720497-31.801242 31.801242l0 737.78882c0 31.801242-31.801242 63.602484-63.602484 63.602484L238.509317 954.037267c-38.161491 0-82.68323-31.801242-82.68323-63.602484l0-69.962733c0-31.801242 38.161491-50.881988 76.322981-50.881988l534.26087 0c19.080745 0 31.801242-12.720497 31.801242-31.801242L798.21118 114.484472c0-69.962733-50.881988-114.484472-127.204969-114.484472L238.509317 0C168.546584 0 98.583851 38.161491 98.583851 114.484472l0 782.310559c0 0 0 0 0 6.360248 0 6.360248 0 6.360248 0 12.720497 6.360248 57.242236 63.602484 101.763975 120.84472 108.124224 0 0 6.360248 0 6.360248 0 0 0 0 0 6.360248 0l566.062112 0c69.962733 0 127.204969-57.242236 127.204969-120.84472L925.416149 152.645963C925.416149 139.925466 912.695652 120.84472 893.614907 120.84472zM772.770186 833.192547 251.229814 833.192547c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242l521.540373 0c19.080745 0 31.801242-12.720497 31.801242-31.801242S791.850932 833.192547 772.770186 833.192547z"
                  fill="none" p-id="7381"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">
        <svg t="1751522328256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="11123" width="56" height="56">
            <path d="M640.587294 924.837647l-23.597176 12.875294c-12.001882 6.550588-30.027294 3.900235-39.574589-5.647059l-35.824941-35.644235c-10.029176-10.029176-12.724706-27.331765-6.113882-39.378823l12.589176-24.124236c-10.149647-17.935059-17.046588-33.566118-21.579294-48.865882l-21.639529-7.484235c-11.083294-3.237647-27.738353-15.646118-27.738353-31.804236l-0.496941-50.432c0-16.158118 16.880941-28.596706 28.295529-31.924706l24.606118-7.664941a235.324235 235.324235 0 0 1 19.983059-48.444235l-13.206589-24.124235c-6.701176-12.242824-4.201412-29.560471 5.677177-39.439059l35.629176-35.433412c9.562353-9.562353 27.256471-11.971765 39.634824-5.210353l23.597176 13.507765c3.087059-1.686588 6.279529-3.267765 9.562353-4.818824a398.396235 398.396235 0 0 0-146.823529-62.659764c82.447059-32.512 141.025882-112.775529 141.025882-206.637177 0-122.533647-99.674353-222.192941-222.192941-222.192941S200.192 118.949647 200.192 241.468235c0 93.711059 58.398118 173.884235 140.634353 206.486589C157.936941 485.767529 20.028235 648.071529 20.028235 841.999059c0 47.164235 33.054118 62.780235 59.632941 75.324235l1.536 0.632471c107.188706 37.827765 262.204235 47.917176 336.896 47.917176 64.873412 0 167.198118-8.056471 256.045177-25.901176a233.833412 233.833412 0 0 1-33.551059-15.134118z"
                  p-id="11124"></path>
            <path d="M755.260235 573.680941c-81.438118 0-147.681882 66.243765-147.681882 147.681883s66.258824 147.681882 147.681882 147.681882 147.681882-66.243765 147.681883-147.681882-66.243765-147.681882-147.681883-147.681883z m-2.108235 202.676706a55.883294 55.883294 0 1 1 0-111.766588 55.883294 55.883294 0 0 1 0 111.766588z"
                  p-id="11125"></path>
            <path d="M1016.952471 693.037176c0-8.779294-3.900235-16.745412-12.333177-19.2l-34.831059-8.749176c-5.481412-21.895529-12.664471-42.526118-24.064-61.334588l15.75153-27.437177c4.216471-7.710118 2.951529-19.094588-3.252706-25.298823l-35.448471-35.629177c-3.885176-3.870118-9.728-5.963294-15.465412-5.963294-3.448471 0-6.851765 0.752941-9.743058 2.334118L869.647059 527.058824a221.952 221.952 0 0 0-60.400941-24.666353l-9.080471-25.057883c-2.469647-8.432941-11.414588-16.489412-20.193882-16.489412l-50.56753 0.828236c-8.779294 0-18.070588 7.228235-20.540235 15.661176l-9.321412 28.792471c-20.931765 5.436235-40.658824 12.348235-58.729412 23.235765l-29.470117-16.865883a21.443765 21.443765 0 0 0-10.24-2.469647c-5.601882 0-11.294118 1.942588-15.058824 5.722353l-35.629176 35.448471c-6.204235 6.204235-7.845647 17.498353-3.629177 25.20847l16.429177 29.982118a222.177882 222.177882 0 0 0-23.868235 57.810823l-30.960942 9.637647c-8.432941 2.469647-19.817412 11.655529-19.817411 20.449883l0.496941 50.386823c0 8.779294 10.887529 17.980235 19.305412 20.449883l27.964235 9.652706c5.240471 20.570353 14.863059 39.981176 25.359059 57.840941l-15.676236 30.027294c-4.216471 7.710118-2.198588 19.094588 4.005647 25.298823l35.824942 35.629177c3.885176 3.870118 9.803294 5.963294 15.585882 5.963294 3.478588 0 6.912-0.752941 9.803294-2.334118l29.530353-16.112941c18.070588 10.887529 37.827765 19.290353 58.744471 24.726588l9.321411 29.786353c2.469647 8.432941 10.977882 20.600471 19.757177 20.600471l51.516235 0.045176c8.779294 0 17.573647-12.212706 20.043294-20.645647l9.09553-26.051764c21.534118-5.270588 41.848471-15.149176 60.431058-26.157177l27.994353 14.561883c2.770824 1.520941 6.023529 2.228706 9.336471 2.228705 5.888 0 11.986824-2.258824 15.962353-6.234353l35.629176-35.824941c6.204235-6.204235 7.845647-17.679059 3.629177-25.389176l-14.998588-27.497412a222.629647 222.629647 0 0 0 25.554823-61.349647l31.834353-8.749176c8.417882-2.469647 13.071059-11.685647 13.071059-20.464942l-0.737882-51.636706zM755.260235 877.040941c-85.835294 0-155.663059-69.842824-155.663059-155.663059s69.827765-155.663059 155.663059-155.663058 155.663059 69.842824 155.663059 155.663058-69.827765 155.663059-155.663059 155.663059z"
                  p-id="11126"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">
        <svg t="1751522606523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="13916" width="56" height="56">
            <path d="M160 288h128a48 48 0 1 0 0-96h-128a48 48 0 1 0 0 96z m0 272h128a48 48 0 1 0 0-96h-128a48 48 0 1 0 0 96zM864 48h-48v928h48a48 48 0 0 0 48-48V96a48 48 0 0 0-48-48zM208 96v48h80a96 96 0 1 1 0 192h-80v80h80a96 96 0 1 1 0 192h-80v80h80a96 96 0 1 1 0 192h-80v48a48 48 0 0 0 48 48h512V48H256a48 48 0 0 0-48 48z m128 688a48 48 0 0 0-48-48h-128a48 48 0 1 0 0 96h128a48 48 0 0 0 48-48z"
                  fill="" p-id="13917"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a href="http://tyxy.ztbu.edu.cn/" target="_blank">

        <svg t="1751522906957" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="29143" width="56" height="56" fill="none">
            <path d="M792.576 379.392a25.6 25.6 0 0 0 25.2928 25.8048h283.2384A25.6 25.6 0 0 0 1126.4 379.392a25.6 25.6 0 0 0-25.2928-25.8048h-283.2384a25.6 25.6 0 0 0-25.344 25.8048z m303.9232 80.7424H761.856c-16.5376 0-29.9008 11.6224-29.9008 25.7536 0 14.1824 13.312 25.7536 29.9008 25.7536h334.6432c16.4864 0 29.9008-11.5712 29.9008-25.7536 0-14.1312-13.4144-25.7536-29.9008-25.7536z m4.608 106.496h-283.2384a25.6 25.6 0 0 0-25.344 25.7536 25.6 25.6 0 0 0 25.344 25.7536h283.2384A25.6 25.6 0 0 0 1126.4 592.384a25.6 25.6 0 0 0-25.2928-25.8048zM543.0272 1024H341.6576C150.8352 1024 0 1024 0 923.648v-20.1216c0-188.16 153.2928-341.1968 341.7088-341.1968h201.2672c188.416 0 341.76 153.0368 341.76 341.1968v20.0704C884.6848 1024 726.3232 1024 542.976 1024z m-203.1616-405.1456c-158.464 0-287.4368 128.4096-287.4368 286.208v20.48c0 40.9088 166.0928 40.9088 287.4368 40.9088h204.9536c100.4544 0 287.4368 0 287.4368-40.96v-20.3776c0-157.8496-128.9728-286.208-287.4368-286.208H339.8656z m92.416-76.7488a271.4112 271.4112 0 0 1-271.2064-271.0528A271.36 271.36 0 0 1 432.2816 0a271.36 271.36 0 0 1 271.2064 271.0528 271.4624 271.4624 0 0 1-271.2064 271.0528z m-215.3472-271.872c0 118.1696 96.6144 214.3232 215.3472 214.3232 118.784 0 215.3984-96.1536 215.3984-214.3232 0-118.2208-96.6144-214.3232-215.3984-214.3232S216.9344 152.0128 216.9344 270.2336z"
                  fill="    none" p-id="29144"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a target="_blank">
        <svg t="1751523266952" class="icon" viewBox="0 0 1224 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="39236" width="56" height="56" fill="none">
            <path d="M279.551 786.706a124.17 124.17 0 0 0 52.412-17.459h8.729L166.106 594.661v8.73a124.134 124.134 0 0 0-17.459 52.41l-61.14 192.045zM891.03 87.899l-52.412-61.141a74.609 74.609 0 0 0-113.552 0l-52.411 61.14 165.963 165.964 52.412-52.411a74.502 74.502 0 0 0 0-113.552zM786.207 306.274L620.243 140.31 227.14 533.45l165.963 165.963z m0 0M0 935.175h1222.921v87.364H0z"
                  fill="none" p-id="39237"></path>
        </svg>
    </a>
</div>

<div class="campus-box campus-bg1">
    <a target="_blank">
        <svg t="1751523715728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="41709" width="70" height="70" fill="none">
            <path d="M972.868267 76.202667a33.5872 33.5872 0 0 0-25.070934-25.070934c-183.3472-42.120533-383.351467 8.004267-525.858133 150.510934a560.9472 560.9472 0 0 0-55.415467 64.631466c-4.7616 6.485333-11.5712 10.973867-19.370666 12.9024-74.4448 18.432-146.158933 57.326933-205.704534 116.872534a450.338133 450.338133 0 0 0-69.0688 88.814933c-16.2816 27.4944 11.6224 59.921067 41.591467 48.8448 47.291733-17.476267 98.389333-26.0608 151.057067-26.094933-0.733867 4.488533-1.792 8.925867-2.423467 13.4144a2271.232 2271.232 0 0 0 115.592533 124.7744 2265.070933 2265.070933 0 0 0 124.7744 115.592533c4.488533-0.631467 8.925867-1.6896 13.397334-2.423467-0.034133 52.667733-8.618667 103.765333-26.094934 151.057067-11.076267 29.969067 21.3504 57.873067 48.8448 41.591467a450.440533 450.440533 0 0 0 88.832-69.0688c59.528533-59.528533 98.423467-131.259733 116.855467-205.687467 1.928533-7.799467 6.434133-14.609067 12.9024-19.370667a560.9472 560.9472 0 0 0 64.631467-55.415466c142.523733-142.5408 192.648533-342.528 150.528-525.8752zM743.185067 442.043733a114.005333 114.005333 0 1 1-161.245867-161.245866 114.005333 114.005333 0 0 1 161.245867 161.245866z"
                  fill="none" p-id="41710"></path>
            <path d="M183.483733 689.493333C148.923733 724.053333 2.4064 938.1888 44.117333 979.899733c41.710933 41.710933 255.8464-104.823467 290.4064-139.3664 34.56-34.56 28.757333-96.375467-12.9536-138.069333-41.710933-41.728-103.543467-47.530667-138.0864-12.970667z"
                  fill="none" p-id="41711"></path>
        </svg>

    </a>
</div>
<div class="campus-box campus-bg1">
    <a target="_blank">
        <svg t="1751524301365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="53087" width="70" height="70">
            <path d="M874.990756 603.431386l-244.550739-425.258427L389.476991 178.172959l244.542552 425.258427L874.990756 603.431386zM428.461887 638.913505l-120.486118 212.626655 464.227973 0 120.538307-212.626655L428.461887 638.913505zM357.605096 231.328599 127.270127 638.913505l120.435976 212.626655 233.915517-407.583882L357.605096 231.328599z"
                  p-id="53088" fill="none"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a target="_blank">
        <svg t="1751524457707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="54185" width="70" height="70">
            <path d="M887.488 609.088c8.384-32.576 11.008-110.208 8.384-145.28-18.688-253.504-306.752-377.92-511.104-326.016 153.856 53.376 310.336 198.784 311.488 371.008 0.128 21.184-1.536 41.92-4.672 62.272L526.4 553.664l107.072 124.16 107.008 124.224 138.176-88.256 138.176-88.128L887.488 609.088z"
                  fill="none" p-id="54186"></path>
            <path d="M136.128 422.144C126.848 454.4 122.368 532.032 124.032 567.104c12.224 253.952 297.088 385.536 502.656 338.88-152.512-57.344-305.216-206.592-302.016-378.752 0.448-21.184 2.624-41.92 6.272-62.08l164.672 21.376-103.808-126.72L288 232.896 147.648 317.504 7.232 402.24 136.128 422.144z"
                  fill="none" p-id="54187"></path>
        </svg>
    </a>
</div>
<div class="campus-box campus-bg1">
    <a target="_blank">
        <svg t="1751524576703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="55295" width="70" height="70">
            <path d="M848.457143 128c0 0-58.514286 0-153.6-36.571429-102.4-36.571429-164.571429-76.8-164.571429-76.8L501.028571 0 475.428571 14.628571c0 0-65.828571 40.228571-164.571429 76.8-98.742857 32.914286-153.6 36.571429-153.6 36.571429L109.714286 131.657143l0 504.685714C109.714286 822.857143 457.142857 1024 501.028571 1024c40.228571 0 391.314286-201.142857 391.314286-387.657143l0-504.685714L848.457143 128zM475.428571 709.485714l-182.857143-168.228571 54.857143-69.485714 117.028571 106.057143 219.428571-274.285714 65.828571 62.171429L475.428571 709.485714 475.428571 709.485714z"
                  p-id="55296"></path>
        </svg>
    </a>
</div>

</body>
</html>
